<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';

let animationId = 0;
const bfx = ref(0.005);
const bfy = ref(0.005);
onMounted(() => {
    let frames = 0;
    let rad = Math.PI / 180;
    const a = bfx.value;
    const b = bfy.value;
    (function freqAnimation() {
        frames += 1;
        bfx.value = a + 0.003 * Math.cos(frames * rad);
        bfy.value = b + 0.003 * Math.cos(frames * rad);
        animationId = requestAnimationFrame(freqAnimation);
    })();
});

onUnmounted(() => cancelAnimationFrame(animationId));
</script>

<template>
    <div class="site-name" ref="site-name">
        <svg style="display: none">
            <filter
                id="fractal"
                filterUnits="objectBoundingBox"
                x="0%"
                y="0%"
                width="100%"
                height="100%"
            >
                <!-- 位置替换滤镜 -->
                <!--                <feTurbulence-->
                <!--                    id="turbulence"-->
                <!--                    type="fractalNoise"-->
                <!--                    :baseFrequency="`${bfx} ${bfy}`"-->
                <!--                    numOctaves="0.7"-->
                <!--                />-->
                <!-- 映射置换滤镜 -->
                <feDisplacementMap in="SourceGraphic" scale="50" />
            </filter>
        </svg>
        <span> Exploria UI </span>
    </div>
</template>

<style lang="scss" scoped>
.site-name {
    font-size: 3rem;
}
</style>
